<template>
    <div style="padding: 0 10px;" :class="bgStyle===0?'':'pageOn'" :style="{marginTop:slider+'px',background:activeColor}">
        <div class="mobile-page">
            <div class="home_product">
                <!-- 单列 -->
                <template v-if="itemStyle == 0">
                    <div class="list-wrapper itemA" v-if="list.length>0">
                        <div class="item" :class="conStyle?'':'itemOn'" v-for="(item,index) in list" :key="index">
                            <div class="img-box">
                                <img v-if="item.image" :src="item.image" alt="">
                                <div v-else class="empty-box"><span class="iconfont-diy icontupian"></span></div>
                            </div>
                            <div class="info">
                                <div class="hd">
                                    <div class="title line2" v-if="titleShow">{{item.store_name}}</div>
                                    <div class="text">
                                        <div class="label" :style="{background:labelColor}">旗舰店</div>
                                        <div class="coupon" v-if="item.couponId && item.couponId.length && couponShow" :style="'border:1px solid '+labelColor+';color:'+labelColor">领券</div>
                                        <div class="ship">包邮</div>
                                    </div>
                                </div>
                                <div class="price" :style="{color:fontColor}">
                                    <div class="num" v-if="priceShow">
                                        <priceFormat :price="item.price" weight intSize="18" floatSize="16" labelSize="14"></priceFormat>
                                    </div>
                                    <!-- <div class="old-price" v-if="opriceShow">¥{{item.ot_price}}</div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-wrapper itemA" v-else>
                        <div class="item" :class="conStyle?'':'itemOn'">
                            <div class="img-box">
                                <div class="empty-box"><span class="iconfont-diy icontupian"></span></div>
                            </div>
                            <div class="info">
                                <div class="hd">
                                    <div class="title line2" v-if="titleShow">商品名称</div>
                                </div>
                               <div class="text">
                                    <div class="label" :style="{background:labelColor}">旗舰店</div>
                                    <div class="coupon" v-if="couponShow" :style="'border:1px solid '+labelColor+';color:'+labelColor">领券</div>
                                    <div class="ship">包邮</div>
                                </div>
                                 <div class="price" :style="{color:fontColor}">
                                    <div class="num" v-if="priceShow">
                                        <priceFormat :price="'199'" weight intSize="18" floatSize="16" labelSize="14"></priceFormat>
                                    </div>
                                    <!-- <div class="old-price" v-if="opriceShow">¥399</div> -->
                                </div>
                            </div>
                        </div>
                        <div class="item" :class="conStyle?'':'itemOn'">
                            <div class="img-box">
                                <div class="empty-box"><span class="iconfont-diy icontupian"></span></div>
                            </div>
                            <div class="info">
                                <div class="hd">
                                    <div class="title line2" v-if="titleShow">商品名称</div>
                                </div>
                               <div class="text">
                                    <div class="label" :style="{background:labelColor}">旗舰店</div>
                                    <div class="coupon" v-if="couponShow" :style="'border:1px solid '+labelColor+';color:'+labelColor">领券</div>
                                    <div class="ship">包邮</div>
                                </div>
                                 <div class="price" :style="{color:fontColor}">
                                    <div class="num" v-if="priceShow">
                                        <priceFormat :price="'199'" weight intSize="18" floatSize="16" labelSize="14"></priceFormat>
                                    </div>
                                    <!-- <div class="old-price" v-if="opriceShow">¥399</div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <!-- 二列 -->
                <template v-if="itemStyle == 1">
                    <div class="list-wrapper itemC" v-if="list.length>0">
                        <div class="item" :class="conStyle?'':'itemOn'" v-for="(item,index) in list" :key="index">
                            <div class="img-box">
                                <img v-if="item.image" :src="item.image" alt="">
                                <div v-else class="empty-box"><span class="iconfont-diy icontupian"></span></div>
                            </div>
                            <div class="info">
                                <div class="hd">
                                    <div class="title line2" v-if="titleShow">{{item.store_name}}</div>
                                </div>
                                <div class="price" :style="{color:fontColor}">
                                    <div class="num" v-if="priceShow">
                                       <priceFormat :price="item.price" weight intSize="18" floatSize="16" labelSize="14"></priceFormat>
                                    </div>  
                                    <!-- <div class="old-price" v-if="opriceShow">{{item.ot_price}}</div> -->
                                </div>
                                <div class="text">
                                    <!-- <div class="label" :style="{background:labelColor}" v-if="index==0">官方旗舰店</div> -->
                                    <div class="coupon" :style="'border:1px solid '+labelColor+';color:'+labelColor" :class="priceShow?'':'on'" v-if="item.couponId && item.couponId.length && couponShow">领券</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-wrapper itemC" v-else>
                        <div class="item" :class="conStyle?'':'itemOn'">
                            <div class="img-box">
                                <div class="empty-box"><span class="iconfont-diy icontupian"></span></div>
                            </div>
                            <div class="info">
                                <div class="hd">
                                    <div class="title line2" v-if="titleShow">商品名称</div>
                                </div>
                                <div class="price" :style="{color:fontColor}">
                                    <div class="num" v-if="priceShow">
                                        <priceFormat :price="'66.66'" weight intSize="18" floatSize="16" labelSize="14"></priceFormat>
                                    </div> 
                                    <!-- <div class="old-price" v-if="opriceShow">¥99.99</div>  -->
                                </div>
                                <div class="text">
                                    <!-- <div class="label" :style="{background:labelColor}">官方旗舰店</div> -->
                                    <div class="coupon" :style="'border:1px solid '+labelColor+';color:'+labelColor" v-if="couponShow">领券</div>
                                </div>
                            </div>
                        </div>
                        <div class="item" :class="conStyle?'':'itemOn'">
                            <div class="img-box">
                                <div class="empty-box"><span class="iconfont-diy icontupian"></span></div>
                            </div>
                            <div class="info">
                                <div class="hd">
                                    <div class="title line2" v-if="titleShow">商品名称</div>
                                </div>
                                <div class="price" :style="{color:fontColor}">
                                    <div class="num" v-if="priceShow">
                                        <priceFormat :price="'66.66'" weight intSize="18" floatSize="16" labelSize="14"></priceFormat>
                                    </div>
                                    <!-- <div class="old-price" v-if="opriceShow">¥99.99</div>    -->
                                </div>
                                <div class="text">
                                    <!-- <div class="label" :style="{background:labelColor}">官方旗舰店</div> -->
                                    <div class="coupon" :style="'border:1px solid '+labelColor+';color:'+labelColor" v-if="couponShow">领券</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <!-- 三列 -->
                <template v-if="itemStyle == 2">
                    <div class="list-wrapper itemB" v-if="list.length>0">
                        <div class="item" :class="conStyle?'':'itemOn'" v-for="(item,index) in list" :key="index">
                            <div class="img-box">
                                <img v-if="item.image" :src="item.image" alt="">
                                <div v-else class="empty-box"><span class="iconfont-diy icontupian"></span></div>   
                            </div>
                            <div class="info">
                                <div class="hd">
                                    <div class="title line1" v-if="titleShow">{{item.store_name}}</div>
                                </div>
                                <div class="price" :style="{color:fontColor}">
                                    <div class="num" v-if="priceShow">
                                        <priceFormat :price="item.price" weight intSize="18" floatSize="16" labelSize="14"></priceFormat>
                                    </div>
                                    <!-- <div class="old-price" v-if="opriceShow">¥{{item.ot_price}}</div>     -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list-wrapper itemB" v-else>
                        <div class="item" :class="conStyle?'':'itemOn'">
                            <div class="img-box">
                                <div class="empty-box"><span class="iconfont-diy icontupian"></span></div>
                            </div>
                            <div class="info">
                                <div class="hd">
                                    <div class="title line1" v-if="titleShow">商品名称</div>
                                </div>
                                <div class="price" :style="{color:fontColor}">
                                    <div class="num" v-if="priceShow">
                                        <priceFormat :price="'66.66'" weight intSize="18" floatSize="16" labelSize="14"></priceFormat>
                                    </div>
                                    <!-- <div class="old-price" v-if="opriceShow">¥99.99</div> -->
                                </div>
                            </div>
                        </div>
                        <div class="item" :class="conStyle?'':'itemOn'">
                            <div class="img-box">
                                <div class="empty-box"><span class="iconfont-diy icontupian"></span></div>
                            </div>
                            <div class="info">
                                <div class="hd">
                                    <div class="title line1" v-if="titleShow">商品名称</div>
                                </div>
                                <div class="price" :style="{color:fontColor}">
                                    <div class="num" v-if="priceShow">
                                        <priceFormat :price="'66.66'" weight intSize="18" floatSize="16" labelSize="14"></priceFormat>
                                    </div>
                                    <!-- <div class="old-price" v-if="opriceShow">¥99.99</div> -->
                                </div>
                            </div>
                        </div>
                        <div class="item" :class="conStyle?'':'itemOn'">
                            <div class="img-box">
                                <div class="empty-box"><span class="iconfont-diy icontupian"></span></div>
                            </div>
                            <div class="info">
                                <div class="hd">
                                    <div class="title line1" v-if="titleShow">商品名称</div>
                                </div>
                                <div class="price" :style="{color:fontColor}">
                                    <div class="num" v-if="priceShow">
                                        <priceFormat :price="'66.66'" weight intSize="18" floatSize="16" labelSize="14"></priceFormat>
                                    </div>
                                    <!-- <div class="old-price" v-if="opriceShow">¥99.99</div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <!-- 大图 -->
                <template v-if="itemStyle == 3">
                    <div class="listBig" v-if="list.length>0">
                        <div class="itemBig" :class="conStyle?'':'itemOn'" v-for="(item,index) in list" :key="index">
                            <div class="img-box">
                                <img v-if="item.image" :src="item.image" alt="">
                                <div v-else class="empty-box"><span class="iconfont-diy icontupian"></span></div>
                            </div>
                            <div class="name line2"><span  v-if="titleShow">{{item.store_name}}</span></div>
                            <div class="price" :style="{color:fontColor}"><span v-if="priceShow">
                                <priceFormat :price="item.price" weight intSize="18" floatSize="16" labelSize="14"></priceFormat>
                            </span>
                                <!-- <span class="old-price" v-if="opriceShow">¥{{item.ot_price}}</span> -->
                            </div>
                        </div>
                    </div>
                    <div class="listBig" v-else>
                        <div class="itemBig" :class="conStyle?'':'itemOn'">
                            <div class="img-box">
                                <div class="empty-box"><span class="iconfont-diy icontupian"></span></div>
                            </div>
                            <div class="name line2"><span  v-if="titleShow">商品名称</span></div>
                            <div class="price" :style="{color:fontColor}"><span v-if="priceShow">
                                <priceFormat :price="'66.66'" weight intSize="18" floatSize="16" labelSize="14"></priceFormat>
                            </span>
                                <!-- <span class="old-price" v-if="opriceShow">¥99.99</span> -->
                            </div>
                        </div>
                         <div class="itemBig" :class="conStyle?'':'itemOn'">
                            <div class="img-box">
                                <div class="empty-box"><span class="iconfont-diy icontupian"></span></div>
                            </div>
                            <div class="name line2"><span  v-if="titleShow">商品名称</span></div>
                            <div class="price" :style="{color:fontColor}">
                                <span v-if="priceShow">
                                    <priceFormat :price="'66.66'" weight intSize="18" floatSize="16" labelSize="14"></priceFormat>
                                </span>
                                <!-- <span class="old-price" v-if="opriceShow">¥99.99</span> -->
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { mapState } from 'vuex'
import { getProduct } from '@/api/diy'
import priceFormat from "@/components/priceFormat/index";
export default {
    name: 'home_goods_list',
    cname: '商品列表',
    configName: 'c_home_goods_list',
    icon: 'iconshangpinliebiao2',
    type: 0, // 0 基础组件 1 营销组件 2工具组件
    defaultName: 'goodList', // 外面匹配名称
    components: {priceFormat},
    props: {
        index: {
            type: null
        },
        num: {
            type: null
        }
    },
    computed: {
        ...mapState('mobildConfig', ['defaultArray'])
    },
    watch: {
        pageData: {    
            handler (nVal, oVal) {
                this.setConfig(nVal)
            },
            deep: true
        },
        num: {
            handler (nVal, oVal) {
                let data = this.$store.state.mobildConfig.defaultArray[nVal]
                this.setConfig(data)
            },
            deep: true
        },
        'defaultArray': {
            handler (nVal, oVal) {
                let data = this.$store.state.mobildConfig.defaultArray[this.num]
                this.setConfig(data);
            },
            deep: true
        }
    },
    data () {
        return {
            // 默认初始化数据禁止修改
            defaultConfig: {
                name: 'goodList',
                timestamp: this.num,
                setUp: {
                    tabVal: '0'
                },
                tabConfig: {
                    title: '选择模板',
                    tabVal: 0,
                    type: 1,
                    tabList: [
                        {
                            name: '自动选择',
                            icon: 'iconzidongxuanze'
                        },
                        {
                            name: '手动选择',
                            icon: 'iconshoudongxuanze'
                        }
                    ]
                },
                titleShow: {
                    title: '是否显示名称',
                    val: 1
                },
                // opriceShow: {
                //     title: '是否显示原价',
                //     val: true
                // },
                priceShow: {
                    title: '是否显示价格',
                    val: 1
                },
                couponShow: {
                    title: '是否显示优惠券',
                    val: 1
                },
                selectConfig: {
                    title: '商品分类',
                    activeValue: [],
                    list: [
                        {
                            value: '',
                            label: ''
                        },
                        {
                            value: '',
                            label: ''
                        }
                    ]
                },
                goodsSort: {
                    title: '商品排序',
                    name: 'goodsSort',
                    type: 0,
                    list: [
                        {
                            val: '综合',
                            icon: 'iconComm_whole'
                        },
                        {
                            val: '销量',
                            icon: 'iconComm_number'
                        },
                        {
                            val: '价格',
                            icon: 'iconComm_Price'
                        }
                    ]
                },
                numConfig: {
                    val: 6
                },
                themeColor: {
                    title: '背景颜色',
                    name: 'themeColor',
                    default: [{
                        item: '#f5f5f5'
                    }],
                    color: [
                        {
                            item: '#f5f5f5'
                        }
                    ]
                },
                fontColor: {
                    title: '价格颜色',
                    name: 'fontColor',
                    default: [{
                        item: '#e93323'
                    }],
                    color: [
                        {
                            item: '#e93323'
                        }
                    ]
                },
                labelColor: {
                    title: '活动标签',
                    name: 'labelColor',
                    default: [{
                        item: '#e93323'
                    }],
                    color: [
                        {
                            item: '#e93323'
                        }
                    ]
                },
                itemStyle: {
                    title: '显示类型',
                    name: 'itemSstyle',
                    type: 0,
                    list: [
                        {
                            val: '单列',
                            icon: 'iconzuoyoutuwen'
                        },
                        {
                            val: '两列',
                            icon: 'iconlianglie'
                        },
                        {
                            val: '三列',
                            icon: 'iconsanlie'
                        },
                        {
                            val: '大图',
                            icon: 'icondanlie'
                        }
                    ]
                },
                bgStyle: {
                    title: '背景样式',
                    name: 'bgStyle',
                    type: 0,
                    list: [
                        {
                            val: '直角',
                            icon: 'iconPic_square'
                        },
                        {
                            val: '圆角',
                            icon: 'iconPic_fillet'
                        }
                    ]
                },
                conStyle: {
                    title: '内容样式',
                    name: 'conStyle',
                    type: 1,
                    list: [
                        {
                            val: '直角',
                            icon: 'iconPic_square'
                        },
                        {
                            val: '圆角',
                            icon: 'iconPic_fillet'
                        }
                    ]
                },
                mbConfig: {
                    title: '页面间距',
                    val: 0,
                    min: 0
                },
                productList: {
                    title:'商品列表',
                    list:[]
                },
                goodsList: {
                    max:20,
                    list:[]
                }
            },
            navlist: [],
            imgStyle: '',
            txtColor: '',
            slider: '',
            tabCur: 0,
            list: [],
            activeColor: '',
            fontColor: '',
            labelColor:'',
            pageData: {},
            itemStyle: 0,
            titleShow: true,
            // opriceShow: true,
            priceShow: true,
            couponShow: true,
            bgStyle:0,
            conStyle:1
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.pageData = this.$store.state.mobildConfig.defaultArray[this.num]
            this.getProductList(this.pageData)
        })
    },
    methods: {
        setConfig (data) {   
            if(!data) return
            if(data.mbConfig){
                this.itemStyle = data.itemStyle.type || 0;
                this.activeColor = data.themeColor.color[0].item;
                this.fontColor = data.fontColor.color[0].item;
                this.labelColor = data.labelColor.color[0].item;
                this.slider = data.mbConfig.val;
                this.titleShow = data.titleShow.val;
                // this.opriceShow = data.opriceShow.val;
                this.priceShow = data.priceShow.val;
                this.couponShow = data.couponShow;
                this.bgStyle = data.bgStyle.type;
                this.conStyle = data.conStyle.type;
                this.getProductList(data)
                // this.list = data.goodsList&&data.goodsList.list || [];
                // if(data.tabConfig&&data.tabConfig.tabVal){
                //     this.list = data.goodsList&&data.goodsList.list || [];
                // }else{
                //     this.list = data.productList&&data.productList.list || [];
                // }   
                
            }
        },
        /**获取之前选择的商品 */
        getProductList(data){
            if(!data)return
            let activeValue = this.pageData.selectConfig.activeValue
            let parmas = {}
            if(data.tabConfig.tabVal){ //手动选择
                parmas = { product_ids:data.goodsList.ids.toString() }
            }else{
                parmas = { 
                    cate_pid: activeValue,
                    page: 1,
                    limit: this.pageData.numConfig.val,
                    order: this.pageData.goodsSort.type == 2 ? 'price_asc' : this.pageData.goodsSort.type == 1 ? 'sales' : '',
                 }
            }
            getProduct(parmas).then(res => {
                this.list = res.data.list
                // this.pageData.goodsList.list = res.data.list;
                // if(data.tabConfig.tabVal){
                //     this.pageData.goodsList.list = res.data.list;
                // }else{
                //     this.pageData.productList.list = res.data.list;
                // }  
                // this.setConfig(this.pageData)
            })
        }
    }
}
</script>
<style scoped lang="scss">
.itemOn{
    border-radius: 0!important;
    img,.empty-box{
        border-radius: 0!important;
    }
    .img-box{
        .label{
            border-radius: 0 0 8px 0!important;
        }
    }
}
.pageOn{
    border-radius: 8px!important;
} 
.line2{
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
}  
.line1{
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1; 
}      
.listBig{
    width: 100%;
    padding: 10px 0 10px 0;
    .itemBig{
        width: 100%;
        margin-bottom: 15px;
        border-radius: 10px;
        .img-box{
            width: 100%;
            height: 160px;
            position: relative;
            border-radius: 50px;
            img{
                width: 100%;
                height: 160px;
                border-radius: 10px;
            }  
            .empty-box{
                border-radius: 10px;
            }   
            .label{
                position: absolute;
                top: 0;
                left:0;
                width:59px;
                height:25px;
                line-height: 25px;
                text-align: center;
                color: #fff;
                font-size: 12px;
                border-radius: 8px 0 8px 0;
            } 
        }      
        .name{
            font-size: 15px;
            font-weight: bold;
            margin-top: 8px;
            padding: 0 10px;
        }    
        .coupon{
            width:16px;
            height:18px;
            line-height: 18px;
            text-align: center;
            font-size: 12px;
            margin-right: 5px;
            display: inline-block;
        }  
        .price{
            font-weight: bold;
            font-size: 12px;
            padding: 0 10px;
            margin-top: 10px;
            font-size: 18px;
            .num{ 
                margin-right: 5px;
            }
            .old-price{
                color: #aaa!important;
                font-weight: normal;
                text-decoration: line-through;
            }     
        }       
    }        
}
.paddingBox{
    padding-bottom: 0;
}     
.home_product{
    .hd_nav{
        display: flex;
        height: 65px;
        padding: 0 5px;
        .item{
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 25%;
            .title{
                font-size: 14px;
                color: #282828;
            }    
            .label{
                width:62px;
                height:18px;
                line-height: 18px;
                text-align: center;
                background:transparent;
                border-radius:8px;
                color: #999999;
                font-size: 12px;
                &.active{
                    .title{
                        color: #FF4444;
                    }      
                    .label{
                        color: #fff;
                        background:linear-gradient(270deg,rgba(255,84,0,1) 0%,rgba(255,0,0,1) 100%);
                    }  
                }
                
            }       
        }    
    }      
    .list-wrapper{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-top: 10px;
        .item{
            width: 48.5%;
            margin-bottom: 10px;
            border-radius: 10px;
            .img-box{
                position: relative;
                width: 100%;
                height: 173px;
                img,.box{
                    width: 100%;
                    height: 100%;
                    border-radius:10px;
                }  
                    .empty-box{
                        background:  #f3f5f7;
                        border-radius:10px;
                    }
                        
                .box{
                    background: #D8D8D8;
                }  
            }    
            .info{
                padding: 10px;
                .title{
                    font-size: 13px;
                    color: #282828;
                } 
                    .text{
                    display: flex;
                    align-items: center;
                    margin-top: 10px;
                }
                    .label{
                    padding: 0 5px;
                    border-radius: 2px;
                    color: #fff;
                    font-size: 10px;
                    text-align: center;
                    line-height: 15px;
                }
                .coupon,.ship{
                    padding: 0 5px;
                    line-height: 13px;
                    border-radius: 2px;
                    font-size: 10px;
                    margin-left: 3px;
                }
                .ship{
                    color: #FF9000;
                    border: 1px solid #FF9000;
                }       
                .old-price{
                    color: #aaa;
                    font-size: 13px;
                    text-decoration: line-through;
                    margin-left: 3px;
                }    
                .price{
                    display: flex;
                    align-items: center;
                    font-size: 18px;    
                    .label{
                        width:16px;
                        height:18px;
                        margin-left: 5px;
                        text-align: center;
                        line-height: 18px;
                        font-size: 11px;
                        &.on{
                            margin-left: 0;
                        }
                    }      
                }      
            }  
        }
        &.itemA
            /*background #fff*/
            .item{
                display: flex;
                width: 100%;
                background: #fff;
                padding: 10px;
                .img-box{
                    position: relative;
                    width: 110px;
                    height: 110px;
                    img,.box,.empty-box{
                        border-radius: 10px;
                    }     
                }
                .info{
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;
                    flex: 1;
                    margin-left: 5px;
                    padding: 5px 10px;
                    .num{
                        font-weight: bold;
                    }
                }
            }         
        &.itemB{
            justify-content: inherit;
            .item{
                width: 31.6%;
                margin-right: 8px;
                overflow: hidden;
                &:nth-child(3n){
                    margin-right: 0;
                }          
                .img-box{
                    position: relative;
                    width: 100%;
                    height: 110px;
                    img,.box,.empty-box{
                            border-radius:10px;
                    }   
                } 
                .price{
                    display: block;
                    margin-top: 10px;
                    font-size: 18px;
                }   
            }                    
        }                
            &.itemC{
                .item{
                    background-color: #fff;
                    img,.box,.empty-box{
                        border-radius:10px;
                    }
                    .price{
                        margin-top: 10px;
                        font-size: 18px;
                    }
            }      
        }
    }
}
</style>
